// 执法机关主体信息 列表
<template>
  <page-header-wrapper :title="false">
    <a-card>
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :xxl="5" :lg="8" :sm="8">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" v-auth:info_force_unit_list @click="searchInfo_force_unit" icon="search">查询</a-button>
                <a-button icon="reload" class="m-l-8" @click="reQuery">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <div class="m-b-16">
        <a-button type="primary" v-auth:info_force_unit_save class="m-l-8" @click="handleAdd" icon="plus">添加执法机关主体信息</a-button>
        <a-button type="primary" class="m-l-8" @click="showImport" icon="import">导入执法机关主体信息</a-button>
        <a-button type="primary" v-auth:info_force_unit_list class="m-l-8" @click="exportExcel" icon="export">导出执法机关主体信息</a-button>
        <a-button type="link" class="m-l-8" @click="readme" icon="question-circle">什么是执法机关主体信息</a-button>
        <a-dropdown v-auth:info_force_unit_del v-model="visible_batch">
          <a-menu slot="overlay">
            <a-menu-item>
              <a-popconfirm :title="'已选择'+selectedRowKeys.length+'项,确定删除吗？'" ok-text="确定" cancel-text="取消" @confirm="delInfo_force_units">
                <div><a-icon type="delete" />&nbsp;删除</div>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
          <a-button v-show="selectedRowKeys.length>0" class="m-l-8"> 批量操作 <a-icon type="down" /> </a-button>
        </a-dropdown>
      </div>

      <!-- 导入数据弹窗 -->
      <a-modal title="导入执法机关主体信息" v-auth:info_force_unit_list v-model="importVisible" destroyOnClose @ok="handleImportOk" :maskClosable="false">
        <a-alert type="info" show-icon>
          <span slot="message">
            请下载格式模版并按照模版内容导入
            <a href="javascript:void(0)" @click="downloadExcelModal"> 点击下载Excel模版 </a>
          </span>
        </a-alert>
        <br />
        <a-upload-dragger name="file" accept=".xls,.xlsx" @reject="handleImportReject" :before-upload="beforeImportUpload" :show-upload-list="false">
          <div v-if="importExcelFile.name">
            <a-row class="l-h-25">
              <a-col :span="8" class="p-r-10">
                <p class="ant-upload-drag-icon m-b-0">
                  <a-icon type="file" />
                </p>
              </a-col>
              <a-col :span="16" class="text-left">
                <p class="ant-upload-hint">
                  {{ importExcelFile.name }}
                </p>
                <p class="ant-upload-hint">
                  将文件拖到此处或点击此处重新上传
                </p>
              </a-col>
            </a-row>
          </div>
          <div v-else>
            <p class="ant-upload-drag-icon m-b-0">
              <a-icon type="cloud-upload" />
            </p>
            <p class="ant-upload-hint">
              您可以将文件拖到此处或点击此处上传
            </p>
            <p class="ant-upload-hint">
              文件格式为Excel
            </p>
          </div>
        </a-upload-dragger>
        <br />
        <div>
          <span>导入须知：</span><br />
          <span>1、请勿输入任何特殊字符类型</span><br />
          <span>2、模板文件上传无误后请点击“确定”按钮执行导入</span><br />
          <span>3、导入数据内容过多可能会时间过长，请耐心等待 </span>
        </div>
      </a-modal>

      <div class="spin-content">
        已选择&nbsp;
        <a class="f-w-600" v-text="selectedRowKeys.length"></a>
        项&nbsp;
        <a class="m-l-24" @click="() => selectedRowKeys = []">清空</a>
      </div>
      <a-table :scroll="{ x: 1300, y: 300 }" :columns="ucolumns" :data-source="udata" :pagination="upagination" :loading="loading" rowKey="id" @change="tableChange" size="middle" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
        <span slot="serial" slot-scope="text, record, index">
          {{(upagination.current-1)*upagination.pageSize+parseInt(index)+1}}
        </span>
        <span slot="operation" slot-scope="text, record">
          <template v-auth:info_force_unit_view>
            <a @click="handleView(record)">详情</a>
            <a-divider type="vertical" />
          </template>
          <a-dropdown>
            <a class="ant-dropdown-link">更多<a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item v-auth:info_force_unit_save>
                <a @click="handleEdit(record)">编辑</a>
              </a-menu-item>
              <a-menu-item v-auth:info_force_unit_del>
                <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="delInfo_force_unitById(record)">
                  <a-icon slot="icon" type="delete" />
                  <a href="javascript:;">删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </a-card>
    <a-drawer :title="isEdit?'编辑执法机关主体信息':'添加执法机关主体信息'" width="38%" :visible="visible_edit" :body-style="{ paddingBottom: '80px' }" @close="visible_edit = false" destroyOnClose>
      <Edit ref="edit" @close="visible_edit = false" @reloadList="searchInfo_force_unit"></Edit>
    </a-drawer>
    <a-drawer title="执法机关主体信息详情" width="38%" :visible="visible_details" :body-style="{ paddingBottom: '80px' }" @close="visible_details = false" destroyOnClose>
      <Details ref="details" @close="visible_details = false"></Details>
    </a-drawer>
  </page-header-wrapper>
</template>

<script>
  import {
    delInfo_force_units,
    delInfo_force_unit,
    viewInfo_force_unit,
    saveInfo_force_unit,
    queryInfo_force_unitList,
    output,
    exportExcelTemplate,
    importExcel
  } from '@/api/info/info_force_unit'
  import Edit from '@/views/baseData/enforcement/child/Info_force_unitEdit'
  import Details from '@/views/baseData/enforcement/child/Info_force_unitView'
  import Tp_agy_class from '@/enumeration/Tp_agy_class.js'
  import Tp_yesno from '@/enumeration/YesNo.js'
  import Tp_bl_aera from '@/enumeration/Tp_bl_aera.js'
  import { queryEnumerationValuesByName } from '@/api/base/enumeration'
  import { downloadFile } from '@/utils/util'

  export default {
    data() {
      return {
        loading: false, // 遮罩是否显示
        visible_batch: false, // 批量操作可见
        visible_edit: false, // 编辑是否可见
        visible_details: false, // 详情是否可见
        isEdit: false, // 是否编辑
        queryParam: {
        }, // 查询条件
        selectedRowKeys: [], // 选中的行id
        agy_ctList: {}, // 执法机关类别枚举下拉数据

        agy_classList: {}, // 执法机关层级枚举下拉数据
        Tp_agy_class: Tp_agy_class, // Tp_agy_class枚举值，用于状态判断或者参数传值
        public_isList: {}, // 是否公开枚举下拉数据
        Tp_yesno: Tp_yesno, // Tp_yesno枚举值，用于状态判断或者参数传值
        directlyList: {}, // 是否直属枚举下拉数据
        bl_aeraList: {}, // 所属区域枚举下拉数据
        Tp_bl_aera: Tp_bl_aera, // Tp_bl_aera枚举值，用于状态判断或者参数传值
        udata: [], // 表格数据
        upagination: {// 表格分页参数
          defaultPageSize: 20,
          total: 0,
          current: 1,
          pageSize: 10,
          showTotal: total => `共${total}条数据`,
          showSizeChanger: true,
          pageSizeOptions: ['10', '20', '50', '100']
        },
        ucolumns: [
          {
            title: '序号',
            width: '50px',
            align: 'center',
            fixed: 'left',
            scopedSlots: { customRender: 'serial' }
          },

          {
            title: '执法机关名称',
            dataIndex: 'agy_name',
            width: '1',
            sorter: (a, b) => String(a.agy_name).localeCompare(String(b.agy_name)),
            align: 'center'
          },
          {
            title: '执法机关类别',
            dataIndex: 'agy_ct_text',
            width: '1',
            align: 'center',
            sorter: (a, b) => a.agy_ct_text.localeCompare(b.agy_ct_text),
          },
          {
            title: '执法机关层级',
            dataIndex: 'agy_class_text',
            width: '1',
            align: 'center',
            sorter: (a, b) => a.agy_class_text.localeCompare(b.agy_class_text),
          },
          {
            title: '执法类别',
            dataIndex: 'agy_type',
            width: '1',
            sorter: (a, b) => String(a.agy_type).localeCompare(String(b.agy_type)),
            align: 'center'
          },
          {
            title: '编制人数',
            dataIndex: 'org_num',
            width: '1',
            sorter: (a, b) => a.org_num - b.org_num,
            align: 'center'
          },
          {
            title: '是否公开',
            dataIndex: 'public_is_text',
            width: '1',
            align: 'center',
            sorter: (a, b) => a.public_is_text.localeCompare(b.public_is_text),
          },
          {
            title: '是否直属',
            dataIndex: 'directly_text',
            width: '1',
            align: 'center',
            sorter: (a, b) => a.directly_text.localeCompare(b.directly_text),
          },
          {
            title: '联系人姓名',
            dataIndex: 'link_name',
            width: '1',
            sorter: (a, b) => String(a.link_name).localeCompare(String(b.link_name)),
            align: 'center'
          },
          {
            title: '联系人电话',
            dataIndex: 'link_phone',
            width: '1',
            sorter: (a, b) => String(a.link_phone).localeCompare(String(b.link_phone)),
            align: 'center'
          },
          {
            title: '详细地址',
            dataIndex: 'link_addr',
            width: '1',
            sorter: (a, b) => String(a.link_addr).localeCompare(String(b.link_addr)),
            align: 'center'
          },
          {
            title: '所在部门id',
            dataIndex: 'secid',
            width: '1',
            sorter: (a, b) => String(a.secid).localeCompare(String(b.secid)),
            align: 'center'
          },
          {
            title: '所属区域',
            dataIndex: 'bl_aera_text',
            width: '1',
            align: 'center',
            sorter: (a, b) => a.bl_aera_text.localeCompare(b.bl_aera_text),
          },
          {
            title: '设定依据',
            dataIndex: 'rely',
            width: '1',
            sorter: (a, b) => String(a.rely).localeCompare(String(b.rely)),
            align: 'center'
          },
          {
            title: '执法证编号范围',
            dataIndex: 'force_sco',
            width: '1',
            sorter: (a, b) => String(a.force_sco).localeCompare(String(b.force_sco)),
            align: 'center'
          },
          {
            title: '监督证编号范围',
            dataIndex: 'code_sco',
            width: '1',
            sorter: (a, b) => String(a.code_sco).localeCompare(String(b.code_sco)),
            align: 'center'
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '150px',
            fixed: 'right',
            scopedSlots: { customRender: 'operation' }
          }
        ], // 表头
        importVisible: false, //是否显示导入数据弹窗
        importExcelFile: {} //导入模板文件
      }
    },
    created() {
      this.findEnumByName();
      this.findInfo_force_unitList()
    },
    methods: {
      /**
       *  查询枚举值
       */
      findEnumByName() {
        const parameter = [
        ]
        parameter.forEach(item => {
          queryEnumerationValuesByName({ 'enName': item.enumName }).then(res => {
            console.log('query' + item.enumName, res.data)
            this[`${item.enname}List`] = res.data
            this[`${item.enname}List`].unshift({ id: '', description: '全部' })
            console.log(this[`${item.enname}List`])
          })
        })
      },
      /**
       *  查询执法机关主体信息列表
       */
      findInfo_force_unitList() {
        this.loading = true
        queryInfo_force_unitList(this.queryParam).then(res => {
          console.log('queryInfo_force_unitList:', res.data)
          this.udata = res.data.records
          // 将当前页码和数量与后台绑定
          this.upagination.total = res.data.total
          this.upagination.current = res.data.current
          this.upagination.pageSize = res.data.size
          this.loading = false
        })
      },
      /**
       * 重置查询条件并查询数据
       */
      reQuery() {
        this.queryParam = {
        }
        this.findInfo_force_unitList()
      },
      /**
       * 翻页、设置页数量时触发，将分页组建的当前页与大小传给后台
       */
      tableChange(pagination, filters, sorter, { currentDataSource }) {
        this.queryParam.pageNumber = pagination.current
        this.queryParam.pageSize = pagination.pageSize
        if (sorter != null && sorter.order != null) {
          this.queryParam.sort = sorter.field
          this.queryParam.order = sorter.order
        }
        this.findInfo_force_unitList()
      },
      /**
       * 查询
       */
      searchInfo_force_unit() {
        // 查询时将当前页码重置为1，否则会出现有数据但不显示的问题
        this.queryParam.pageNumber = 1
        // this.upagination.current = 1
        this.findInfo_force_unitList()
      },
      /**
       * 选中行数据时触发
       */
      onSelectChange(selectedRowKeys) {
        console.log('selectedRowKeys changed: ', selectedRowKeys)
        this.selectedRowKeys = selectedRowKeys
      },
      /**
       * 进入新增页面
       */
      handleAdd() {
        this.isEdit = false
        this.visible_edit = true
        this.$nextTick(() => {
          this.$refs.edit.resetForm()
        })
      },
      /**
       * 进入编辑页面
       */
      handleEdit(res) {
        this.isEdit = true
        this.visible_edit = true
        this.$nextTick(() => {
          this.$refs.edit.findInfo_force_unitById(res.id)
        })
      },
      /**
       * 进入详情页面
       */
      handleView(res) {
        this.visible_details = true
        this.$nextTick(() => {
          this.$refs.details.findInfo_force_unitById(res.id)
        })
      },
      /**
       * 删除执法机关主体信息
       */
      delInfo_force_unitById(res) {
        let id = res.id
        delInfo_force_unit(id).then(res => {
          console.log('delInfo_force_unit:', res)
          if (res.code !== 0) {
            this.$message.error(res.msg)
          } else {
            this.selectedRowKeys = []
            this.searchInfo_force_unit()
            this.$message.success('删除成功')
          }
        })
      },
      /**
       * 批量删除执法机关主体信息
       */
      delInfo_force_units() {
        delInfo_force_units(this.selectedRowKeys.toString()).then(res => {
          console.log('delInfo_force_units:', res)
          if (res.code !== 0) {
            this.$message.error(res.msg)
          } else {
            this.selectedRowKeys = []
            this.searchInfo_force_unit()
            this.$message.success('删除成功')
          }
        })
      },
      readme() {
        this.$router.push({ name: 'info_force_unitReadme', params: { queryParam: this.queryParam } })
      },
      /**
       * 显示导入弹窗
       */
      showImport() {
        this.importVisible = true
        this.importExcelFile = {} //置空导入模板文件
      },
      /**
       * 确定保存导入数据
       */
      handleImportOk() {
        this.importExcelData()
        this.importVisible = false
      },
      /**
       * 拖拽验证文件类型
       */
      handleImportReject(file) {
        this.beforeImportUpload(file)
      },
      /**
       * 上传导入文件前验证文件类型
       */
      beforeImportUpload(file) {
        return new Promise((resolve, reject) => {
          //文件格式是否为xls、xlsx
          let isAcceptType = file.type === 'application/vnd.ms-excel' || file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
          let acceptType = 'xls、xlsx'
          if (!isAcceptType) {
            this.$message.warning('请上传' + acceptType + '格式文件');
            return reject(false);
          }
          //文件小于20M
          let isLtSize = file.size / 1024 / 1024 < 20;
          if (!isLtSize) {
            this.$message.warning('请上传20MB以内的文件');
            return reject(false);
          }
          this.importExcelFile = file
          return resolve(false);
        })
      },
      /**
       *	导入Excel
       */
      importExcelData() {
        const importLoad = this.$message.loading('正在导入中...', 0)
        importExcel(this.importExcelFile).then(res => {
          if (res.code == 0) {
            setTimeout(importLoad, 0)
            this.searchInfo_force_unit()
            this.$message.success('导入成功')
          } else {
            setTimeout(importLoad, 0)
            this.$message.error('导入失败')
          }
        })
      },
      /**
       *	下载导入模板
       */
      downloadExcelModal() {
        exportExcelTemplate().then(response => {
          downloadFile(response, '执法机关主体信息-导入模板.xls')
        }).catch(function () {
          console.log(error)
        })
      },
      /**
       *  导出Excel
       */
      exportExcel() {
        output(this.queryParam).then(response => {
          downloadFile(response, '执法机关主体信息.xls')
        }).catch(function () {
          console.log(error)
        })
      }
    },
    components: {
      Edit,
      Details
    }
  }
</script>
<style scoped>
</style>